<template>
  <div>
    <div>
      <el-tabs v-model="activeNameTop" type="card" @tab-click="handleClickTop">
        <el-tab-pane :label="$t('mesTechnology.all')" name="-1"></el-tab-pane>
        <el-tab-pane :label="`${$t('mesTechnology.wait')}(${activeNameTopNum.sum1})`" name="0"></el-tab-pane>
        <el-tab-pane :label="`${$t('mesTechnology.enabling')}(${activeNameTopNum.sum2})`" name="1"></el-tab-pane>
        <el-tab-pane :label="`${$t('mesTechnology.deactivated')}(${activeNameTopNum.sum3})`" name="2"></el-tab-pane>
      </el-tabs>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :otherParams="{
          technologyStatus: activeNameTop == '-1' ? '' : activeNameTop
        }"
        :getList="getList"
        :transFormdata="transFormdata"
        uniqueId="mesTechnologyTable"
      >
      </ele-page>
    </div>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialog, rowConfig } from './config'
import { getList, rowCreate, rowUpdate, rowDel, rowDetail, getTechnologyTypeList, upgrade, stop, publish, statusList, getYesOrNotList } from '@/api/process/mesTechnology'

export default {
  name: 'mesTechnology',
  mixins: [searchConfig],
  data() {
    return {
      activeNameTop: '-1',
      activeNameTopNum: {
        sum1: '',
        sum2: '',
        sum3: ''
      },
      searchData: {},
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formDescDialog, //新增修改框
      searchConfig,
      operateList,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'technologyCode',
          label: $i18n.t('mesTechnology.technologyCode'),
          width: 140,
          fixed: 'left',
          showOverflowTooltip: true
        },
        {
          prop: 'technologyName',
          label: $i18n.t('mesTechnology.technologyName'),
          width: 140,
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: "technologyType",
          label: $i18n.t("mesTechnology.technologyType"),
          width: 100,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getTechnologyTypeList()
            return list.data.result
          }
        },
        {
          prop: 'prodCode',
          label: $i18n.t('mesTechnology.prodCode'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'prodName',
          label: $i18n.t('mesTechnology.prodName'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'seriesCode',
          label: $i18n.t('mesTechnology.seriesCode'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'seriesName',
          label: $i18n.t('mesTechnology.seriesName'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'isDefaultTechnology',
          label: $i18n.t('mesTechnology.isDefaultTechnology'),
          minWidth: 100,
          showOverflowTooltip: true,
          require: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getYesOrNotList()
            return list.data.result
          }
        },

        {
          prop: "workshopName",
          label: $i18n.t("mesTechnology.workShop"),
          width: 120,
          showOverflowTooltip: true
        },
        // {
        //   prop: "standardTime",
        //   label: $i18n.t("mesTechnology.standardTime"),
        //   width: 180,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "assistTime",
        //   label: $i18n.t("mesTechnology.assistTime"),
        //   width: 180,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'versionNumber',
          label: $i18n.t('mesTechnology.version'),
          showOverflowTooltip: true
        },
        {
          prop: 'technologyStatus', // 0待发布，1启用，2停用
          label: $i18n.t('mesTechnology.technologyStatus'),
          width: 100,
          showOverflowTooltip: true,
          fixed: 'right',
          render: (h, { row }) => {
            let dom = null
            if (row.technologyStatus == 1) {
              dom = (
                <el-tag effect="dark" type="success">
                  {$i18n.t('mesTechnology.Enable')}
                </el-tag>
              )
            } else if (row.technologyStatus == 2) {
              dom = (
                <el-tag effect="dark" type="warning">
                  {$i18n.t('mesTechnology.deactivate')}
                </el-tag>
              )
            } else {
              dom = (
                <el-tag effect="dark" type="info">
                  {$i18n.t('mesTechnology.wait')}
                </el-tag>
              )
            }

            return dom
          }
        },
        {
          prop: 'createTime',
          label: $i18n.t('common.createTime'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          showOverflowTooltip: false,
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    async statusList() {
      let res = await statusList()
      this.activeNameTopNum.sum1 = res.data.result.find((ite) => ite.technologyStatus == '0').count
      this.activeNameTopNum.sum2 = res.data.result.find((ite) => ite.technologyStatus == '1').count
      this.activeNameTopNum.sum3 = res.data.result.find((ite) => ite.technologyStatus == '2').count
    },

    handleClickTop(tab, event) {
      this.$refs.eleTable.handleReset()
      // this.getList();
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.$router.push({
            path: '/process/mesTechnologyOperateAdd',
            query: { type: 1 } // 1:新增 2:修改 3:查看 4:复制
          })
        },
        upgrade: () => {
          if (data.rows[0].isDefaultTechnology == '1') {
            this.$message.warning($i18n.t('mesTechnology.updateErr'))
            return
          }
          this.$confirm(
            // `确定要升级工艺 [${data.rows[0].technologyName}] 吗?, 是否继续?`,
            $i18n.t('mesTechnology.updateTip'),
            $i18n.t('common.tip'),
            {
              confirmButtonText: $i18n.t('common.ok'),
              cancelButtonText: $i18n.t('common.cancel'),
              type: 'warning'
            }
          ).then(() => {
            upgrade(data.rows[0].id).then((res) => {
              this.$message.success($i18n.t('mesTechnology.updateSuccess'))
              this.refresh()
              this.statusList()
            })
          })
        },
        publish: () => {
          this.$confirm($i18n.t('mesTechnology.publishTip'), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            publish(data.rows[0].id).then((res) => {
              this.$message.success($i18n.t('mesTechnology.publishSuccess'))
              this.refresh()
              this.statusList()
            })
          })
        },
        deactivate: () => {
          this.$confirm($i18n.t('mesTechnology.deactivateTip'), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            stop(data.rows[0].id).then((res) => {
              this.$message.success($i18n.t('mesTechnology.deactivateSuccess'))
              this.refresh()
              this.statusList()
            })
          })
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteBatch', { name: $i18n.t('mesTechnology.name') }), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',')
            this.rowDel(ids)
            this.statusList()
          })
        },
        copy: () => {
          console.log(data.rows[0], 'data.rows[0]')
          this.$router.push({
            path: '/process/mesTechnologyOperateCopy',
            query: {
              type: 4, // 1:新增 2:修改 3:查看 4:复制
              id: data.rows[0].id,
              crossShopFlag: data.rows[0].crossShopFlag,
            }
          })
        }
      }
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          console.log(row.technologyStatus, 'row.technologyStatus')
          if (row.technologyStatus === 1) {
            this.$message.error($i18n.t("mesTechnology.msg1"))
            return
          }
          if (row != null) {
            this.$router.push({
              path: '/process/mesTechnologyOperateEdit',
              query: {
                type: 2, // 1:新增 2:修改 3:查看 4:复制
                id: row.id,
                technologyCode: row.technologyCode
              }
            })
          }
        },
        detail: () => {
          this.$router.push({
            path: '/process/mesTechnologyOperateView',
            query: {
              type: 3,
              id: row.id,
              technologyCode: row.technologyCode
            }
          })
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteSingle', { name: $i18n.t('mesTechnology.name') }), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
            this.statusList()
          })
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      if (data.technologyFile) {
        data.technologyFile = data.technologyFile.map((r) => r.url).join(',')
      }
      const params = this.formDataDialog.id ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data } : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    //删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        const { technologyFile } = res.data.result
        const technologyFiles = technologyFile
          ? technologyFile.split(',').map((val) => {
              const arr = val.split('/')
              return {
                url: val,
                name: arr[arr.length - 1]
              }
            })
          : []
        this.formDataDialog = {
          ...res.data.result,
          technologyFile: technologyFiles
        }
      })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    //转化表格数据
    transFormdata(data) {
      let { page: records, statusList: statisticsData } = data.data.result
      this.activeNameTopNum.sum1 = statisticsData.find((item) => item.technologyStatus === 0)['count']
      this.activeNameTopNum.sum2 = statisticsData.find((item) => item.technologyStatus === 1)['count']
      this.activeNameTopNum.sum3 = statisticsData.find((item) => item.technologyStatus === 2)['count']
      return Promise.resolve({ ...records })
    }
  },
  created() {
    this.statusList()
  }
}
</script>
